<template>
  <basePage :show-tabbar="false" :page-params="pageParams">
    <view class="list-bg">
      <view class="pop-title">
        <view class="title">支付方式</view>
        <view
          class="close"
          @click="closePopFn"
        >
          <image
            class="close-icon"
            src="/static/image/close.png"
          />
        </view>
      </view>
      <view class="pop-content">
        <u-radio-group
          v-model="curOrderInfo.payType"
          :icon-placement="'right'"
          placement="column"
          :border-bottom="true"
        >
          <view class="radio-item bank-transfer">
            <!--     #ifdef MP-WEIXIN     -->
            <text class="icon-wx font_family icon-a-WeChatpay_tongyong_1" />
            <text class="radio-text">微信支付</text>
            <u-radio
              active-color="#FF5533"
              size="14"
              :name="'1001'"
              :custom-style="radioCustomStyle"
            />
            <image class="recommend-icon" src="/ycPayments/static/image/recommend_icon.png" style="width:56rpx;height:32rpx;margin:36rpx 10rpx 0 16rpx;" />
            <!--     #endif      -->
            <!--     #ifdef MP-ALIPAY     -->
            <text class="icon-ali font_family icon-Alipay_tongyong_1" />
            <text class="radio-text">支付宝支付</text>
            <u-radio
              active-color="#FF5533"
              size="14"
              :name="'1001'"
              :custom-style="radioCustomStyle"
            />
            <image class="recommend-icon" src="/ycPayments/static/image/recommend_icon.png" style="width:56rpx;height:32rpx;margin:36rpx 10rpx 0 16rpx;" />
            <!--     #endif      -->
            <!--     #ifdef H5     -->
            <view v-if="isOther" class="radio-item radio-item-nobottom bank-transfer">
              <image class="radio-icon" src="/ycPayments/static/image/bank_pay_icon.png" style="width: 42rpx;height:36rpx;margin-top:32rpx;" />
              <image class="recommend-icon" src="/ycPayments/static/image/recommend_icon.png" style="width:56rpx;height:32rpx;margin:36rpx 10rpx 0 16rpx;" />
              <text class="radio-text">在线支付</text>
              <u-radio
                active-color="#FF5533"
                size="14"
                :name="'1001'"
                :custom-style="radioCustomStyle"
              />
              <view class="radio-remark">
                支持微信,支付宝
              </view>
            </view>

            <view v-if="isWeixin">
              <text class="icon-wx font_family icon-a-WeChatpay_tongyong_1" />
              <text class="radio-text">微信支付</text>
              <u-radio
                active-color="#FF5533"
                size="14"
                :name="'1001'"
                :custom-style="radioCustomStyle"
              />
            </view>
            <view v-if="isAlipay">
              <text class="icon-ali font_family icon-Alipay_tongyong_1" />
              <text class="radio-text">支付宝支付</text>
              <u-radio
                active-color="#FF5533"
                size="14"
                :name="'1001'"
                :custom-style="radioCustomStyle"
              />
            </view>
            <!--     #endif      -->
          </view>

          <view v-if="orderInfo.deliverWay != 'zt'" class="radio-item bank-transfer">
            <image class="radio-icon" src="/ycPayments/static/image/bank_pay_icon.png" style="width:42rpx;height:42rpx" />
            <text class="radio-text">银行转帐</text>
            <u-radio
              active-color="#FF5533"
              size="14"
              :name="'1301'"
              :custom-style="radioCustomStyle"
              :disabled="disableBankPay"
            />
            <view class="radio-remark">
              需客服手动认款，并联系在线客服发送银行回单
            </view>
          </view>
        </u-radio-group>
      </view>
      <view class="btn-box">
        <button class="btn confirm-btn" :plain="true" @click="confirmFn">确定</button>
      </view>
    </view>
  </basePage>
</template>

<script>
import basePage from '@/components/base-page'
export default {
  components: {
    basePage,
  },
  props: {
    orderInfo: {
      type: Object,
      default: null
    },
  },
  data() {
    return {
      title: 'Index',
      pageParams: {
        // state: 'ERROR',
        emptyTitle: '信号可能跑到外星球了哦～',
        errorTitle: '请求失败',
        showButton: true
      },
      radioCustomStyle: { float: 'right', margin: '38rpx 0 0' },
      oldData: {},
      isWeixin: false,
      isAlipay: false,
      isOther: false
    }
  },
  computed: {
    curOrderInfo() {
      return this.orderInfo
    },
    // 禁用银行转账
    disableBankPay() {
      return this.orderInfo.deliverWay == 'zt' // 门店自提不能使用银行转账
    }
  },
  mounted() {
    this.oldData = { ...this.curOrderInfo }
    //#ifdef H5
    if (/MicroMessenger/.test(window.navigator.userAgent)) {
      this.isWeixin = true
    } else if (/AlipayClient/.test(window.navigator.userAgent)) {
      this.isAlipay = true
    } else {
      this.isOther = true
    }
  //#endif
  },
  methods: {
    confirmFn() {
      this.curOrderInfo.payModelList.forEach((item) => {
        if (this.curOrderInfo.payType == item.payType) {
          this.curOrderInfo.payModelChoosen = item
          if (this.curOrderInfo.payType == '1301') {
            this.curOrderInfo.payName = '银行转账'
          } else {
            this.curOrderInfo.payName = item.payName
          }
        }
      })
      this.$emit('update:orderInfo', this.curOrderInfo)
      this.$emit('selectFn')
      this.close()
    },
    close() {
      this.$emit('closePopFn')
    },
    closePopFn() {
      this.$emit('update:orderInfo', this.oldData)
      this.close()
    }
  }
}
</script>
<style scoped lang="scss">
@import "../static/scss/index";
.list-bg{
  height: 500rpx;
  .pop-content{
    .radio-item{
      width: 678rpx;
      height: 98rpx;
      border-bottom: 2rpx solid $uni-f5bg-color;
      font-size: $uni-font-size-base;
      position: relative;
      z-index: 10;
      .radio-text{
        float: left;
        line-height:98rpx;
      }
      .radio-icon{
        float: left;
        margin:30rpx 16rpx 0 0;
      }
      .font_family{
        float: left;
        margin:26rpx 16rpx 0 0;
        font-size: 48rpx;
      }
      .icon-wx{
        color: #09bb07;
      }
      .icon-ali{
        color: #2785ff;
      }
      .recommend-icon{
        float: left;
        margin-left: 20rpx;
      }
      .radio-remark{
        position: absolute;
        width: 504rpx;
        left:58rpx;
        bottom:36rpx;
        color: $uni-text-color-tips;
        font-size: $uni-font-size-sm;
      }
    }
    .radio-item-nobottom{
      border-bottom: none;
    }
    .bank-transfer{
      height: 144rpx;
    }
  }
}
</style>
